<template>
  <div
    v-if="info != null"
    style="
       {
        width: 100%;
        height: 681px;
      }
    "
  >
    <div class="top-content">
      <div class="top-cotent-text">
        <div>{{ info.productName }}</div>
        <ul class="top-content-list">
          <li>概述</li>
          <li>参数</li>
          <li>用户评价</li>
        </ul>
      </div>
    </div>
    <div class="content">
      <div class="left-banner">
        <el-carousel height="518px" indicator-position="outside">
          <el-carousel-item v-for="item in info.pictures" :key="item.pictureId">
            <img
              :src="'http://www.codeedu.com.cn/' + item.productPicture"
              alt=""
            />
          </el-carousel-item>
        </el-carousel>
      </div>
      <div class="right-content">
        <div class="right-content-top">
          <div class="title">{{ info.productName }}</div>
          <div class="details">
            {{ info.productIntro }}
          </div>
          <div class="server">小米自营</div>
          <div class="price">
            <span>{{ info.productSellingPrice }}</span
            ><span
              v-if="info.productSellingPrice != info.productPrice"
              class="old-price"
              >{{ info.productPrice }}</span
            >
          </div>
        </div>
        <div class="total">
          <div class="top">
            <div>{{ info.productName }}</div>
            <div>
              <span>{{ info.productSellingPrice }}</span
              ><span
                class="old-price"
                v-if="info.productSellingPrice != info.productPrice"
                >{{ info.productPrice }}</span
              >
            </div>
          </div>
          <div class="bottom">总计:{{ info.productSellingPrice }}</div>
        </div>
        <div class="btn">
          <el-button class="primary" @click="addShop">加入购物车</el-button>
          <el-button class="info" @click="addCollection">
            <span v-if="!islike">喜欢</span>
            <span v-if="islike">不喜欢了</span>
          </el-button>
        </div>
        <div class="text-bottom">
          <ul>
            <li class="el-icon-circle-check">&nbsp;小米自营</li>
            <li class="el-icon-circle-check">&nbsp;小米发货</li>
            <li class="el-icon-circle-check">&nbsp;7天无理由退货</li>
            <li class="el-icon-circle-check">&nbsp;7天价格保护</li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {
  getShoppingInfo,
  setShoppingCart,
  setCollect,
  getCollect,
} from "../api/home";
export default {
  name: "GoodsDetail",

  data() {
    return {
      info: null,
      islike: false,
    };
  },

  created() {},
  mounted() {
    this.init();
  },
  updated() {},
  computed: {},
  methods: {
    init() {
      getShoppingInfo(this.$route.params.id).then((res) => {
        this.info = res.data;
        this.isLike();
      });
    },
    addShop() {
      let productId = this.info.productId;
      setShoppingCart({
        productId: productId,
      }).then(() => {
        this.$store.dispatch("getUserInfo");
      });
    },
    addCollection() {
      setCollect(this.info.productId);
      this.islike = !this.islike;
    },
    isLike() {
      getCollect().then((res) => {
        res.data.forEach((item) => {
          if (item.productId == this.info.productId) {
            this.islike = true;
          }
        });
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.content {
  width: 1200px;
  height: 618px;
  margin: 0 auto;
  display: flex;
  .right-content {
    width: 706px;
    height: 100%;
    .right-content-top {
      width: 642px;
      padding-top: 34px;
      height: 220px;
      border-bottom: 1px solid #e0e0e0;
      box-sizing: border-box;
      margin-left: 64px;
      .title {
        font-size: 24px;
        height: 29px;
        color: #333333;
        line-height: 100%;
      }
      .details {
        font-size: 16px;
        color: #b0b0b0;
        margin-top: 12px;
      }
      .server {
        font-size: 16px;
        color: #ff6700;
        letter-spacing: 0.75px;
        margin-top: 12px;
      }
      .price {
        font-size: 18px;
        color: #ff6700;
        letter-spacing: 0.75px;
        margin-top: 26px;
        line-height: 100%;
        .old-price {
          font-size: 14px;
          text-decoration: line-through;
          color: #b0b0b0 !important;
          margin-left: 6px;
        }
      }
    }
    .total {
      width: 642px;
      height: 136px;
      background-color: #f9f9fa;
      margin-left: 64px;
      padding-top: 34px;
      margin-top: 50px;
      box-sizing: border-box;
      .top {
        width: 552px;
        height: 16px;
        margin: 0px 60px 30px 60px;
        display: flex;
        justify-content: space-between;
        line-height: 100%;
        color: #606266;
        font-size: 16px;
        .old-price {
          font-size: 16px;
          text-decoration: line-through;
          margin-left: 6px;
        }
      }
      .bottom {
        font-size: 24px;
        margin-left: 60px;
        height: 26px;
        line-height: 100%;
        color: #ff6700;
      }
    }
    .btn {
      margin-left: 64px;
      margin-top: 54px;
      height: 56px;
      display: flex;
      justify-content: space-between;

      .primary {
        width: 340px;
        background: #ff6700;
        color: #ffffff;
      }
      .info {
        width: 260px;
        background: #c0c4cc;
        color: #ffffff;
      }
      .info:hover {
        background: #b0b0b0;
      }
    }
    .text-bottom {
      margin-left: 64px;
      margin-top: 22px;
      height: 16px;
      width: 642px;
      ul {
        display: flex;
        li {
          font-size: 16px;
          margin-right: 25px;
          color: #b0b0b0;
        }
      }
    }
  }
}
.top-content {
  width: 100%;
  height: 62px;
  box-sizing: border-box;
  box-shadow: 0px 4px 10px rgba(148, 148, 148, 0.25);
  line-height: 62px;
  color: #333333;
  > .top-cotent-text {
    margin: 0 auto;
    width: 1200px;
    height: 62px;
    display: flex;
    > div {
      width: 20%;
    }
    .top-content-list {
      width: 80%;
      display: flex;
      justify-content: flex-end;
      > li {
        margin-left: 20px;
      }
    }
  }
}
.left-banner {
  width: 520px;
  height: 100%;
  padding-top: 48px;
  img {
    width: 520px;
    height: 518px;
  }
}
</style>
